<template>
  <div style="padding: 20px">
    <el-form :model="state.search" inline>
      <el-form-item label="姓名">
        <el-input v-model="state.search.name" placeholder="请输入"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="getData" size="mini">搜索</el-button>
        <el-button type="warning" @click="reset" size="mini">重置</el-button>
        <el-button type="success" @click="onDownExcel" size="mini">导出</el-button>
      </el-form-item>
    </el-form>

    <el-table :data="state.list" v-loading="state.loading">
      <el-table-column label="ID" type="index" min-width="80"></el-table-column>
      <el-table-column label="姓名" prop="name" min-width="80"></el-table-column>
      <!-- <el-table-column label="注册日期" prop="create_time" min-width="120"></el-table-column> -->
      <el-table-column label="答题正确数" min-width="120" prop="yes_questions"></el-table-column>
      <el-table-column label="答题错误数" min-width="120" prop="wrong_question"></el-table-column>
      <el-table-column label="课件学习率" min-width="120" prop="test_paper"></el-table-column>
      <el-table-column label="获取证书" min-width="120" prop="certificateNum"></el-table-column>
      <el-table-column label="未审核时间" prop="no_audit_time" width="165"> </el-table-column>
    </el-table>
    <!-- <el-pagination
        style="margin-top: 10px"
        background
        v-model:current-page="state.pagination.page"
        v-model:page-size="state.pagination.rows"
        layout="->,total, sizes, prev, pager, next, jumper"
        :total="state.total"
        @current-change="getList"
        @size-change="getList"
      /> -->
  </div>
</template>

<script lang="ts" setup>
import { reactive } from 'vue'
import { getStudy, learningRecordExcl } from '@/api/dashboard'
const state = reactive({
  loading: false,
  search: {
    name: ''
  },
  pagination: {
    rows: 20,
    page: 1
  },
  total: 0,
  list: []
})
const reset = () => {
  state.search = {
    name: ''
  }
}
const onDownExcel = () => {
  learningRecordExcl(state.search).then((res) => {
    const blob = new Blob([res], {
      type: 'application/vnd.ms-excel'
    })
    if (window.navigator.msSaveOrOpenBlob) {
      //兼容IE10
      navigator.msSaveBlob(blob, '导出文件.xlsx')
    } else {
      const href = URL.createObjectURL(blob) //创建新的URL表示指定的blob对象
      const a = document.createElement('a') //创建a标签
      a.style.display = 'none'
      a.href = href // 指定下载链接
      a.download = '导出文件.xlsx' //指定下载文件名
      a.click() //触发下载
      URL.revokeObjectURL(a.href) //释放URL对象
    }
  })
}
const getData = async () => {
  const { data } = await getStudy({ type: 100, ...state.search })
  state.list = data
}
getData()
</script>

<style lang="scss" scoped></style>
